<!-- 模板 -->
<template>
  <XCard padB="0px">
    <SearchForm :columns="baseFormColumns" :formData="tableData.formData" @submit="submit" @reset="reset" />
  </XCard>
  <XCard>
    <XPropTable ref="tableRef" :TableColumns="TableColumns" :tableData="tableData" :data="datas">
      <template v-slot:btn>
        <el-button type="primary" @click="add">添加</el-button>
      </template>
      <template v-slot:videoCover="scope">
        <el-image style="width: 80px; height: 80px" :src="scope.row.videoCover" :previewSrcList="[scope.row.videoCover]"
          preview-teleported fit="fill" v-if="scope.row.videoCover" />
      </template>
      <template v-slot:videoProfile="scope">
        <div class="text3">{{ scope.row.videoProfile }}</div>
      </template>
      <template v-slot:operation="scope">
        <el-link class="mx-1" type="primary" :underline="false" @click="edit(scope.row)">编辑</el-link>
        <el-link class="mx-1" type="danger" :underline="false" @click="del(scope.row.famousTchBannerId)">删除</el-link>
        <el-link class="mx-1" type="primary" :underline="false" @click="examine(scope.row)">查看</el-link>
      </template>
    </XPropTable>
  </XCard>
  <el-drawer v-model="addDrawer" :title="drawerForm.famousTchBannerId ? '修改' : '添加'" size="35%" @close="closeDrawer">
    <el-form ref="drawerFormRef" :model="drawerForm" :rules="rules" label-width="90px">
      <el-form-item label="名师类型" prop="famousTchTypeId">
        <el-select v-model="drawerForm.famousTchTypeId" placeholder="请选择" style="width:100%;" filterable
          @change="famousTchInfoChange">
          <el-option v-for="item in options1" :key="item.famousTchTypeId" :label="item.famousTchTypeName"
            :value="item.famousTchTypeId" />
        </el-select>
      </el-form-item>
      <el-form-item label="名师名称" prop="famousTchInfoId">
        <el-select v-model="drawerForm.famousTchInfoId" placeholder="请选择" style="width:100%;" filterable
          :disabled="drawerForm.famousTchTypeId ? false : true" @change="famousTchVideoChange">
          <el-option v-for="item in options2" :key="item.famousTchInfoId" :label="item.famousTchInfoName"
            :value="item.famousTchInfoId" />
        </el-select>
      </el-form-item>
      <el-form-item label="视频" prop="famousTchVideoId">
        <el-select v-model="drawerForm.famousTchVideoId" placeholder="请选择" style="width:100%;" filterable
          :disabled="drawerForm.famousTchInfoId ? false : true">
          <el-option v-for="item in options3" :key="item.famousTchVideoId" :label="item.famousTchVideoName"
            :value="item.famousTchVideoId" />
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input-number v-model="drawerForm.orderNum" :min="1" :max="1000" controls-position="right" :step="1"
          step-strictly />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="addDrawer = false">取消</el-button>
        <el-button type="primary" v-throttle="{ fn: onSubmit }">保存</el-button>
      </div>
    </template>
  </el-drawer>
  <!-- <xyVideo ref="xyVideoRef" /> -->
</template>
<script setup lang="ts">
import {
  onMounted,
  reactive,
  ref
} from 'vue';

import {
  ElMessage,
  ElMessageBox
} from 'element-plus';

const baseFormColumns = reactive([
  {
    label:'名称',type: 'input', name: 'name', placeholder: '请输入视频名称'
  },
  {
    label:'名称',type: 'input2',Star:'Star',End:'End', placeholder: '请输入视频名称'
  },
  {
    label:'名称',type: 'input3',value2:'',value:'',labelO: 'names', valueO: 'values',options:[{names:'名称1',values:'1'},{names:'名称2',values:'2'},{names:'名称3',values:'3'}],attrs:{ multiple: true}
  },
  {
    label:'名称',type: 'select', name: 'names1', placeholder: '请输入视频名称',labelO: 'names', valueO: 'values',options:[{names:'名称1',values:'1'},{names:'名称2',values:'2'},{names:'名称3',values:'3'}],attrs:{ multiple: true}
  },
  {
    label:'级联选择',type: 'cascader', name: 'cascader',options:[{names:'名称1',values:'1',children:[{names:'名称1-1',values:'1-1'}]},{names:'名称2',values:'2'},{names:'名称3',values:'3'}],attrs:{ props :{label:'names',value:'values'}},
  },
  {
    label:'年月日',type: 'date-picker', name: 'datePicker', valueFormat:'YYYY-MM-DD'
  },
  {
    label:'开结年月日',type: 'daterange', name: 'daterange',Star:'Star1', End:'End1',format:'YYYY-MM-DD',valueFormat:'YYYY-MM-DD'
  },
  {
    label:'年月日时分',type: 'datetime', name: 'datetime'
  },
  {
    label:'开结年月日时分',type: 'datetimerange', name: 'datetimerange',Star:'Star1', End:'End1',format:'YYYY-MM-DD',valueFormat:'YYYY-MM-DD'
  },
  {
    label:'开结年月日时分横',type: 'datetime2', Star:'Star2', End:'End2',format:'YYYY-MM-DD',valueFormat:'YYYY-MM-DD'
  },
  {
    label:'年',type: 'year',name:'names4',
  },
])
const TableColumns = reactive([
  { label: 'ID', name: 'famousTchBannerId', showOverflowTooltip: true ,},
  { label: '视频名称', name: 'famousTchVideoName'},
  { label: '名师', name: 'famousTchInfoName', },
  { label: '排序', name: 'orderNum', width: '80px','show-overflow-tooltip':true  },
  { label: '视频封面', name: 'videoCover', slot: true },
  { label: '简介', name: 'videoProfile', slot: true },
  { label: '操作', name: 'operation', slot: true, width: '160px' }
])
const tableData = reactive({
  formData: {},
//   url: '/hjw-activity/act-famous-tch-banner/page',
  type: 'get'
})
const datas=ref([{orderNum:1111},{orderNum:1111},{orderNum:111111111111111111111111111111}])
const options1 = ref([])
const options2 = ref([])
const options3 = ref([])
const tableRef = ref(null)
const addDrawer = ref(false)
const drawerForm = reactive({
  famousTchBannerId: '',
  famousTchInfoId: '',
  famousTchTypeId: '',
  famousTchVideoId: '',
  orderNum: null,
})
const rules = reactive({
  famousTchTypeId: [{ required: true, message: '请选择名师类型' }],
  famousTchInfoId: [{ required: true, message: '请选择名师名称' }],
  famousTchVideoId: [{ required: true, message: '请选择视频' }],
  orderNum: [{ required: true, message: '请输入序号' }],
})
const drawerFormRef = ref(null)
const xyVideoRef = ref(null)
function onSubmit() {//弹窗保存
  drawerFormRef.value.validate(val => {
    if (val) {
      // const obj = JSON.parse(JSON.stringify(drawerForm))
    //   if (obj.famousTchBannerId) {
    //     editMasterBanner(obj).then(res => {
    //       ElMessage.success('修改成功')
    //       tableRef.value.initialize()//当前页查询
    //       addDrawer.value = false
    //     })
    //   } else {
    //     addMasterBanner(obj).then(res => {
    //       ElMessage.success('添加成功')
    //       tableRef.value.resetPagination()//第一页查询
    //       addDrawer.value = false
    //     })
    //   }
    }
  })
}
function closeDrawer() {
  drawerFormRef.value.resetFields()
}
function add() {//添加
  drawerForm.famousTchBannerId = ''
  addDrawer.value = true
}
function edit(row) {//编辑
//   drawerForm.famousTchBannerId = row.famousTchBannerId
//   addDrawer.value = true
//   setTimeout(() => {
//     drawerForm.famousTchTypeId = row.famousTchTypeId
//     drawerForm.famousTchInfoId = row.famousTchInfoId
//     drawerForm.famousTchVideoId = row.famousTchVideoId
//     drawerForm.orderNum = row.orderNum
//   }, 300)
}
function examine(row) {//查看
//   xyVideoRef.value.unpack(true, row.videoUrl)
}
function del(id) {//删除
//   ElMessageBox.confirm(
//     `确认删除?`,
//     {
//       confirmButtonText: '确定',
//       cancelButtonText: '取消',
//       type: 'warning',
//     }
//   )
//     .then(() => {
//       delMasterBanner(id).then(res => {
//         ElMessage.success('删除成功')
//         tableRef.value.resetPagination()//第一页查询
//       })
//     })
//     .catch(() => { })
}
function submit() {//搜索
  // tableRef.value.initialize()//当前页查询
  tableRef.value.resetPagination()//第一页查询
}
function reset() {//重置
  tableRef.value.resetPagination()//第一页查询
}
function famousTchInfoChange(val) {//监听名师类型查询名师
//   if (val) {
//     getMasterList({ famousTchTypeId: val }).then(res => {
//       options2.value = res.data
//       drawerForm.famousTchInfoId = ''
//     })
//   } else {
//     options2.value = []
//     drawerForm.famousTchInfoId = ''
//   }
}
function famousTchVideoChange(val) {//监听名师ID变化查询名师下的视频
//   if (val) {
//     getTchVideoList({ famousTchInfoId: val }).then(res => {
//       options3.value = res.data
//       drawerForm.famousTchVideoId = ''
//     })
//   } else {
//     options3.value = []
//     drawerForm.famousTchVideoId = ''
//   }
}

onMounted(() => {
baseFormColumns[2].value='3'
//   getmasterList().then(res => {//名师类型下拉列表
//     options1.value = res.data
//   })
})
</script>
<style lang="scss" scoped></style>